<!-- 模块说明 -->
<template>
    <div class="banner">
        <div>
            <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
                <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
                    <img :src="item.img" :alt="item.alt">
                </van-swipe-item>
            </van-swipe>
        </div>
        <Menu :data="menuList"></Menu>
        <div class="seckill">
            <div v-if="date.sec">
                <b>京东秒杀</b>
                <span>{{ date.hour }}</span>:
                <span>{{ date.min }}</span>:
                <span>{{ date.sec }}</span>
            </div>
        </div>
        <div class="sec-list">
            <div class="sec-list-container">
                <list v-for="(item, i) in killList" :key="i" :data="item"></list>
            </div>
        </div>
        <ProList :data="recommendList" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getBannerList } from '../../api';
import { getProlist, IPage, getsecKill } from '../../api/pro'
import Menu from "./menu.vue";
import diffTime from '../../utils/diffTime';
export interface IMenu {
    img: string;
    title: string
}
const menuList = ref<IMenu[]>([
    {
        img: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
        title: "京东超市",
    },
    {
        img: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
        title: "京东数码",
    },
    {
        img: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
        title: "京东百货",
    },
    {
        img: " https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png",
        title: "充值缴费",
    },
    {
        img: "https://m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png",
        title: "领卷",
    },
    {
        img: "https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png",
        title: "plus会员",
    },
    {
        img: "https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png",
        title: "京东国际",
    },
    {
        img: " https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png",
        title: "附近好店",
    },
])
interface IBanner {
    link: string;
    alt: string;
    img: string;
    bannerid: string;
    flag: boolean;
}
const bannerList = ref<IBanner[]>([]);
const getBanners = async () => {
    let res = await getBannerList();
    bannerList.value = res.data.data;
    console.log(res, 'res')
}
// 分页数据列表
const pageObj = ref<IPage>({
    count: 1,
    limitNum: 10,
})
const recommendList = ref([])
const getProlists = async () => {
    let res = await getProlist(pageObj.value)
    console.log(res, "fff")
    recommendList.value = res.data.data
}
//秒杀
const killList = ref([])
const getsecKills = async () => {
    const res = await getsecKill(killPage.value)
    killList.value = res.data.data
    console.log(res, "res")
}
//秒杀分页
const killPage = ref<IPage>({
    count: 1,
    limitNum: 6
})
//设置时间
const date = ref<{ sec: string | number; min: string | number; hour: string | number; end?: boolean }>({ sec: "", min: "", hour: "", end: false })
//秒杀时间
const secTimes = ref<string[]>(["2023-02-16 : 09:00:00", "2023-02-16 : 12:00:00", "2023-02-16 : 14:00:00", "2023-02-16 : 16:00:00", "2023-02-16 : 18:00:00"])
onMounted(() => {
    getBanners()
    getProlists()
    getsecKills()
    let timer = setInterval(() => {
        date.value = diffTime("2023-02-16: 22:37:00")
        if (date.value.end) {
            killPage.value.count += 1
            getsecKills()
            clearInterval(timer)
            // date.value = diffTime(secTimes.value[i])
        }
    }, 1000)
})
</script>
<style lang="scss" scoped>
.van-swipe {
    border-radius: 5px;
    margin: 10px;
}

.van-swipe-item {
    >img {
        width: 100%;
        height: 220px;
    }
}

.seckill {
    padding: 10px;
    background: #fff;
    margin: 15px 0;

    span {
        padding: 4px 10px;
        margin: 0 5px;
        background: red;
        color: #fff;
    }
}

.sec-list {
    overflow-X: auto;
    width: 100%;
    background: #fff;

    .sec-list-container {
        width: 300vw;
        display: flex;
    }
}
</style>
